
<template>
    <div style="height:100%;width:100%;position:relative;">
        <div :style="'height:'+fixpartsize+addfixstyle" class="fixedpart">
            <slot name="fix"></slot>
        </div>
        <div :style="'top:'+fixpartsize+'background-color:'+splitcolor+';height:'+splitwidth+'px;'" class="splitpart"></div>
        <div :style="'top:'+movesplit+'background-color:'+movesplitcolor+';height:'+splitwidth+'px;cursor:'+getCursor()" @mousedown="splitmousedown" class="splitpartmove"></div>
        <div :style="'top:'+autopartsize+addautopartstyle" class="autopart">
            <slot></slot>
        </div>
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        addautopartstyle: { type: String },
        addfixstyle: { type: String },
        fixsize: { type: Number, default: 40 },
        minfixsize: { type: Number, default: 20 },
        maxfixsize: { type: Number, default: 0 },
        splitwidth: { type: Number, default: 3 },
        splitcolor: { type: String, default: "#ffffff" },
        movingcolor: { type: String, default: "#bbbbbb" },
        canDrag: { type: Boolean, default: true },
        id: { type: String, default: "" },
        rememberConfig: { type: Boolean, default: true },
    },
    data() {
        return {
            fixsizeLocal: 40,
            splitsizeLocal: 40,
            movesplitcolor: "",
        };
    },
    mounted() {
        this.fixsizeLocal = this.fixsize;
        if (this.rememberConfig) {
            var RecSize = this.$tool.getLocalConfig("LayoutRec_" + this.RecID);
            if (RecSize) this.fixsizeLocal = RecSize;
        }
        this.splitsizeLocal = this.fixsizeLocal;
    },
    methods: {
        splitmousedown(ev) {
            if (!this.canDrag) return;
            let that = this;
            let el = ev.target;
            var disY = ev.clientY - el.offsetTop;
            this.movesplitcolor = this.movingcolor;
            document.body.onselectstart = document.body.ondrag = function () {
                return false;
            };
            document.onmousemove = function (ev) {
                var l = ev.clientY - disY;
                that.splitsizeLocal = l;
            };
            document.onmouseup = function () {
                that.movesplitcolor = "";

                let l = that.splitsizeLocal;
                if (l > that.$el.clientHeight - that.splitwidth - that.minfixsize) l = that.$el.clientHeight - that.splitwidth - that.minfixsize;
                if (that.maxfixsize > 0 && l > that.maxfixsize) l = that.maxfixsize;
                if (l < that.minfixsize) l = that.minfixsize;

                that.splitsizeLocal = l;
                that.fixsizeLocal = l;

                that.$tool.setLocalConfig("LayoutRec_" + that.RecID, that.fixsizeLocal);

                document.onmousemove = null;
                document.onmouseup = null;
                document.body.onselectstart = null;
                document.body.ondrag = null;

                that.$nextTick(() => {
                    that.$emit("Resized", {
                        t: "top",
                        f: that.fixsizeLocal,
                        a: that.$el.clientHeight - that.fixsizeLocal - that.splitwidth,
                    });
                });
            };
        },
        getCursor() {
            if (this.canDrag) return "row-resize";
            else return "";
        },
    },
    computed: {
        RecID() {
            if (this.id) {
                return this.id;
            } else {
                let tempobj = this;
                let mypath = "ltop_" + global.location.hash;
                while (tempobj.$parent) {
                    mypath = mypath + "_" + tempobj.$parent.$children.indexOf(tempobj);
                    tempobj = tempobj.$parent;
                }
                return mypath;
            }
        },
        autopartsize() {
            if (this.fixsizeLocal.indexOf && this.fixsizeLocal.indexOf("%") >= 0) {
                return "calc( " + this.fixsizeLocal + " + " + this.splitwidth + "px );";
            } else {
                let tempnum = this.fixsizeLocal + this.splitwidth;
                return tempnum + "px;";
            }
        },
        fixpartsize() {
            if (this.fixsizeLocal.indexOf && this.fixsizeLocal.indexOf("%") >= 0) {
                return this.fixsizeLocal + ";";
            } else {
                return this.fixsizeLocal + "px;";
            }
        },
        movesplit() {
            if (this.splitsizeLocal.indexOf && this.splitsizeLocal.indexOf("%") >= 0) {
                return this.splitsizeLocal + ";";
            } else {
                return this.splitsizeLocal + "px;";
            }
        },
    },
};
</script>

<style scoped>
.fixedpart {
    position: absolute;
    width: 100%;
    top: 0px;
    overflow: auto;
}
.autopart {
    position: absolute;
    width: 100%;
    bottom: 0;
    overflow: auto;
}
.splitpart {
    width: 100%;
    position: absolute;
    z-index: 98;
}
.splitpartmove {
    width: 100%;
    position: absolute;
    z-index: 99;
}

.fixedpart {
    position: absolute;
    width: 100%;
    top: 0px;
    overflow: auto;
}
.autopart {
    position: absolute;
    width: 100%;
    bottom: 0;
    overflow: auto;
}
.splitpart {
    width: 100%;
    position: absolute;
    z-index: 98;
}
.splitpartmove {
    width: 100%;
    position: absolute;
    z-index: 99;
}
</style>


